<template>
  <div class="clueTableWrap">
    <div class="listTable">
      <el-skeleton v-show="loadding" animated />
      <el-table
        :data="tableData"
        border
        style="width: 100vm"
        :stripe="tableStyleObj.stripe"
        ref="elTable"
        @selection-change="showDeleteButton"
        :highlight-current-row="highlightCurrentRow"
        v-show="!loadding"
        :style="{ opacity: opacity }"
      >
        <el-table-column type="selection" width="35" v-if="!isCommon">
        </el-table-column>
        <el-table-column
          fixed
          width="40"
          v-if="tableType != 'noStar' && !isCommon"
        >
          <template slot="header" slot-scope="slot">
            <i
              class="el-icon-star-off is-disabled"
              style="padding: 0 0 0 3px !important; color: white"
            />
          </template>
          <!-- 关注or取消关注 -->
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.star == 0 ? '添加关注' : '取消关注'"
              effect="dark"
              placement="top"
            >
              <el-button
                style="
                  border: none !important;
                  background: none !important;
                  padding: 0 0 0 3px !important;
                "
                @click="toggleStar(scope.row)"
                ><i
                  v-if="scope.row.star == 0"
                  class="el-icon-star-off focus-icon"
                />
                <i v-else class="rp rp-focus-on focus-icon active" />
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 遍历列名 -->
        <el-table-column
          :fixed="item.isLock === 1 ? 'left' : false"
          :prop="item.fieldName"
          :sortable="isCommon ? false : 'custom'"
          :label="item.name"
          width="180"
          v-for="(item, index) in columnList"
          show-overflow-tooltip
          :key="item.id"
          :class-name="'column'"
        >
          <template slot="header" slot-scope="scope">
            <span>{{ item.name }}</span>
            <div class="rightBox">
              <!-- 锁定or取消锁定图标 -->
              <el-button
                :icon="
                  item.isLock === 1
                    ? 'lock el-icon-unlock'
                    : 'lock el-icon-lock'
                "
                class="el-lock-btn"
                type="text"
                @click.stop="fieldFixed(item)"
              />
              <!-- <el-button class="el-filter-btn" type="text" icon="el-icon-more" @click.stop="showFilterClick(item)" /> -->
              <svg-icon
                icon-class="filter"
                class="filters"
                @click.stop="showFilterClick(item)"
                v-if="!isCommon"
              />
            </div>
          </template>
          <template slot-scope="scope">
            <span v-if="item.fieldName == 'address'">
              <!-- {{ scope.row[item.fieldName].map(v => v.name).join(",") }} -->
            </span>
            <el-link
              type="primary"
              :underline="false"
              v-if="
                item.fieldName == 'customerName' ||
                item.fieldName == 'name' ||
                item.fieldName == 'leadsName' ||
                item.fieldName == 'contractId' ||
                item.fieldName == 'invoiceApplyNumber' ||
                item.fieldName == 'customerId' ||
                item.fieldName == 'fieldTpltyg'
              "
              @click="toClickDrawer(scope.row, item.fieldName)"
            >
              {{ scope.row[item.fieldName] }}
            </el-link>
            <span v-else class="tableRow">
              {{ scope.row[item.fieldName] }}
            </span>
          </template>
        </el-table-column>

        <field-set slot="other" :crm-type="crmType" @change="setSave" />
        <slot name="item" />
      </el-table>

      <div class="p-contianer" v-if="!isCommon">
        <div class="p-content-left">
          <el-dropdown trigger="click" placement="top">
            <el-button
              class="dropdown-btn"
              style="
                height: 28px;
                width: 30px;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
              "
              ><i class="el-icon-s-fold"
            /></el-button>
            <el-dropdown-menu
              slot="dropdown"
              class="wk-table-style-dropdown-menu"
            >
              <el-dropdown-item>
                <span @click.stop
                  ><el-switch
                    v-model="tableStyleObj.rightBorderShow"
                  />显示竖向分割线</span
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click.stop
                  ><el-switch
                    v-model="tableStyleObj.bottomBorderShow"
                  />显示横向分割线</span
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click.stop
                  ><el-switch v-model="tableStyleObj.stripe" />显示斑马纹</span
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="p-content-right">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="queryPageList"
          />
        </div>
      </div>
    </div>

    <!-- <clueInfoDrawer ref="clueInfoDrawer"/> -->
  </div>
</template>
<script>
// import TableMixin from '@/components/FieldFilters/tableMixin'

import { setIsLock } from "@/api/customer/common";
/**
 * isCommon 是否通用，通用不展示收藏、筛选、等按钮
 */
export default {
  name: "clues",
  mixins: [],
  props: {
    headData: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
    total: {
      type: Number,
      default: 0,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    tableType: {
      type: String,
      default: "",
    },
    loadding: {
      type: Boolean,
      default: true,
    },
    isCommon: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      crmType: "leads",
      // tableData: [],
      loading: false,
      columnList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      // 锁定列
      fixedValue: "",
      // 斑马纹
      tableStyleObj: {
        // init: false, // 通过网络请求赋值之后的 tableStyleObj， watch 方法执行更新
        stripe: true, // 斑马纹
        bottomBorderShow: true,
        rightBorderShow: true,
      },
      idSingle: "",
      opacity: 0,
    };
  },
  // components:{
  //   clueInfoDrawer
  // },
  watch: {
    headData: {
      handler(newValue, oldValue) {
        console.log({ newValue });
        this.columnList = newValue;
      },
      deep: true,
    },
    loadding: {
      handler(val) {
        console.log({ val });
        if (!val) {
          setTimeout(() => {
            this.opacity = 1;
          }, 200);
        }
      },
    },
  },
  mounted() {
    // this.headData
    // this.queryListHead();
    // this.queryPageList();
    // console.log(this.tableData)
  },
  methods: {
    setSave() {},
    clickChange(row) {
      this.$emit("selection-change", row);
    },
    //显示删除按钮
    showDeleteButton(val) {
      // this.selectedRows = val;
      // console.log(val)
      this.$emit("selection-change", val);
    },
    queryPageList() {
      this.$emit("pagination", this.queryParams.pageNum);
    },
    toClickDrawer(item, type) {
      this.$emit("showDrawer", item, type);
    },
    // 添加关注or取消关注
    toggleStar(row) {
      const h = this.$createElement;
      this.$emit("star", row);
    },
    toggleStarOk(row) {
      if (row.star == 0) {
        console.log("------------------", row.star);
        row.star = 1;
        this.$message({
          message: h(
            "i",
            {
              style:
                "color: teal;line-height: 1.5;font-style:normal;;margin-left:8px",
            },
            "关注成功"
          ),
          // 图标类名
          iconClass: "el-icon-success",
        });
      } else {
        row.star = 0;
        this.$message({
          message: h(
            "i",
            { style: "color: teal;font-style:normal;margin-left:8px" },
            "取消关注成功"
          ),
          iconClass: "el-icon-success",
        });
      }
    },
    // 锁定列
    fieldFixed(item) {
      if (item.isLock == 1) {
        item.isLock = 0;
      } else {
        item.isLock = 1;
      }
      var params = {
        id: item.id,
        isLock: item.isLock,
      };
      setIsLock(params).then((res) => {});
    },
    showFilterClick(item) {
      this.$emit("showFilter", item);
    },
    formatter(row, column) {
      console.log("row========", row);
    },
  },
};
</script>
<style lang="scss" scoped>
.rightBox {
  float: right;

  .filters {
    vertical-align: bottom;
  }
}

.el-table__fixed-header-wrapper {
  min-width: 100vm;
}

::v-deep.el-table th.el-table__cell > .cell > i {
  padding: 0 13px;
}

::v-deep.pagination-container .el-pagination {
  position: static !important;
}

::v-deep.listTable .el-table .el-table__header-wrapper th,
::v-deep.listTable .el-table .el-table__fixed-header-wrapper th {
  background: rgba(215, 219, 236, 0.7) !important;
  font-size: 14px;
  // font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

::v-deep.el-table--border .el-table__cell {
  border-right: 1px solid #d7dbec;
}

::v-deep.el-table--group,
::v-deep.el-table--border {
  border: 1px solid #d7dbec;
}

::v-deep.el-table td.el-table__cell,
::v-deep.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #d7dbec;
}

::v-deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: rgba(215, 219, 236, 0.3);
}

.clueTableWrap {
  // margin-top: 20px;

  .p-contianer {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .p-content-left {
      position: relative;
      top: 0;
      margin-right: 20px;
    }

    .p-content-right {
      .pagination-container {
        position: relative;
        height: auto;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
      }
    }
  }

  .column {
    .el-lock-btn {
      position: absolute;
      right: 25px;
      opacity: 0;
    }

    .el-lock-btn:hover {
      position: absolute;
      right: 25px;
      opacity: 1;
    }

    .el-filter-btn {
      position: absolute;
      right: 5px;
      color: #c0c4cc;
    }

    .el-filter-btn:hover {
      position: absolute;
      right: 5px;
      color: #0052cc;
    }
  }
}
</style>
